<template>

	<el-form :inline="true" :model="searchParam" class="querybar">
		<el-form-item >
			<span slot="label">
             <span class="ziti">查询：</span>
           </span>
		</el-form-item>
		<el-form-item label="姓名">
			<el-input v-model="searchParam.name" placeholder="姓名"></el-input>
		</el-form-item>
		<el-form-item label="性别">
			<el-select v-model="searchParam.gender" placeholder="活动区域">
				<el-option label="---" value=""></el-option>
				<el-option v-for="item in genderList" :label="item" :value="item"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="问题状态">
			<el-select v-model="searchParam.state" placeholder="活动区域">
				<el-option label="---" value=""></el-option>
				<el-option v-for="item in stateList" :label="item" :value="item"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit(1)" id="query">查询</el-button>
		</el-form-item>
	</el-form>

	<el-table :data="result.list" border height="87%" :cell-style="TableCellStyle" :header-cell-style="{color:'#000000',background:'#DCDCDC'}">
		<el-table-column prop="issue_id" label="问题序号" width="auto" align="center"></el-table-column>
		<el-table-column prop="job_id" label="提出人工号" width="auto" align="center"></el-table-column>
		<el-table-column prop="name" label="姓名" width="auto" align="center"></el-table-column>
		<el-table-column prop="gender" label="性别" width="auto" align="center"></el-table-column>
		<el-table-column prop="username" label="账号" width="auto" align="center"></el-table-column>
		<el-table-column prop="detail" label="问题描述" width="auto" align="center" :formatter="stateFormat"></el-table-column>
		<el-table-column prop="state" label="问题状态" width="auto" align="center"></el-table-column>
		<el-table-column prop="date" label="提出时间" width="auto" align="center"></el-table-column>	
		<el-table-column prop="picture" label="详情" width="auto" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success"
						@click="explanationList=scope.row.explanation,pictureList=scope.row.picture,detailform.issue_id=scope.row.issue_id,
						message0=scope.row.detail,pictureDetail()">查看
					</el-button>
				</el-row>
			</template>
		</el-table-column>
		<el-table-column label="申请理由及审批情况" width="auto" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success"
						@click="detailform.issue_id=scope.row.issue_id,detailVisible = true,queryMessage(scope.row.detail)">详情
					</el-button>
				</el-row>
			</template>
		</el-table-column>	
	</el-table>

	<div class="block">
		<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
			:page-size="searchParam.onePageCount" :total="result.total">
		</el-pagination>
	</div>

	<!-- 原因 -->
	<el-dialog v-model="detailVisible" title="详情" width="65%" height="50%">
		<el-form :model="detailform" class="fl">

			<el-form-item v-if="message1===''&&message2===''&&message3===''&&message4===''&&message5===''">
				<div id="app" style="text-align: center;font-size: 25px;">
					暂无 
				</div>
			</el-form-item>
			
			<el-form-item v-if="message1!==''" label="领导的想法：">
				<div id="app" style="text-align: left;">
					<p>{{message1}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message2!==''" label="经费审核不通过原因：">
				<div id="app" style="text-align: left;">
					<p>{{message2}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message3!==''" label="经费申请详情：">
				<div id="app" style="text-align: left;">
					<p>{{message3}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message4!==''" label="维修不合格原因：">
				<div id="app" style="text-align: left;">
					<p>{{message4}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message5!==''" label="无法维修原因：">
				<div id="app" style="text-align: left;">
					<p>{{message5}}</p>
				</div>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="detailVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>

</template>
<script>
	import axios from "axios"
	export default {
		data() {
			return {
				searchParam: {
					name:'',
					gender:'',
					state:'',
					currentpage: 1,
					onePageCount: 12
				},
				result: [],
				applyFundFormVisible: false,
				applyFundForm: {
					issue_id:'',
					detail: ''
				},
				addFormVisible: false,		
				message0:'',
				message1:'',
				message2:'',
				message3:'',
				message4:'',		
				message5:'',
				detailVisible: false,
				detailform:{
					issue_id:''
				},
				genderList: ['男','女'],
				stateList: ['问题未审核',
							'待检查','问题审核未通过',
							'待申请经费','判定无法维修',
							'经费申请中','无法维修',
							'待维修','经费申请未通过',
							'未检查是否维修合格',
							'维修完成','维修不合格'],
				pictureList:[],
				pictureVisible: false,
				explanationList:[],
			}
		},
		methods: {
			pictureDetail(){
				localStorage.setItem("pictureList",JSON.stringify(this.pictureList))
				localStorage.setItem("explanationList",JSON.stringify(this.explanationList))
				localStorage.setItem("explanation",this.message0)
				this.$router.push({
					path: '/home_manager/list_picture'
				})
			},
			stateFormat(row, column, cellValue) {
				// console.log(row , column , cellValue)
				if (!cellValue) return "";
				if (cellValue.length > 8) {
					//最长固定显示4个字符
					return cellValue.slice(0, 8) + "...";
				}
				return cellValue;
			},
			onSubmit(currentpage) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.searchParam.currentpage = currentpage;
				axios.post("/api/issues_manager/getinformation", {
						"name":this.searchParam.name,
						"gender":this.searchParam.gender,
						"state":this.searchParam.state,
						"pageNum": this.searchParam.currentpage,
						"pageSize": this.searchParam.onePageCount
					}, {
						headers: {
							'Authorization': sessionStorage.getItem('authtoken')
						}
					})
					.then(res => {
						this.result = res.data.result;
						loading.close();
					})
					.catch(error => {
						console.log(error)
						loading.close();
					}
				);
			},
			handleCurrentChange(val) {
				this.onSubmit(val)
			},
			queryMessage(description) {
				axios.post("/api/issues_employee/querymessage", {
						"issue_id":this.detailform.issue_id,
					}, {
						headers: {
							'Authorization': sessionStorage.getItem('authtoken')
						}
					})
					.then(res => {
						this.message0 = description
						this.message1 = res.data.result.persist_reason
						this.message2 = res.data.result.unfund_reason
						this.message3 = res.data.result.applyfund_reason
						this.message4 = res.data.result.maintenance_notqualified_reason
						this.message5 = res.data.result.cannot_repair_reason;
					})
					.catch(error => {
						console.log(error)
					}
				);
			},
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.fr {
		float: right;
	}

	.fl {
		text-align: left;
	}

	.querybar{
		margin-top: 1%;
		margin-right: 10%;
	}

	.ziti{
		font-size: 17px;
	}
</style>
